<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>最强大脑拼王者</title>
    <script type="text/javascript">
        // 根据屏幕的宽度 来设置 html的 font-size
        // 计算 font-size
        var fontSize = window.screen.availWidth / 20;
        document.querySelector('html').style.fontSize = fontSize + 'px';
        console.log(document.documentElement.style.fontSize);
        console.log(fontSize * (636/54));
        window.onresize = function () {
            // 计算 font-size
            var fontSize = window.screen.availWidth / 20;
            document.querySelector('html').style.fontSize = fontSize + 'px';
        }
        // 跟媒体查询比 在移动端使用 没有优劣之分
        // 面试问道 媒体查询 还有 js 都回答 即可

        //translate方法也可以直接传入像素点坐标
    </script>
    <link rel="stylesheet" type="text/css" href="css/goods.css" />
</head>
<body>
<div class="goods">

</div>
</body>
</html>

<!-- 导入 zepto 使用zepto 来实现 dom元素操纵 -->
<script type="text/javascript" src="lib/zepto.js"></script>
<script type="text/javascript" src="lib/event.js"></script>
<script type="text/javascript" src="lib/fx.js"></script>
<script type="text/javascript" src="lib/touch.js"></script>
<!-- fadein toggle等 动画方法的模块 -->
<script type="text/javascript" src="lib/fx_methods.js"></script>